body {
  background: blue;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  header {
    height: 50px;
    background: #ddd;
  }
  main {
    height: 100px;
    background: #fff;
    flex-grow: 1;
  }
  footer {
    height: 45px;
    background: brown;
    display: flex;
    border-top: solid 1px #ddd;
    div {
      background: #fff;
      flex-grow: 1;
      display: flex;
      flex-direction: column-reverse;
      &:last-child > a:first-child {
        border-right: none;
      }
      a {
        display: flex;
        height: 45px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        text-decoration: none;
        color: #666;
        &:nth-child(n + 2) {
          border-top: solid 1px #ddd;
          border-right: solid 1px #ddd;
        }
        &:first-child {
          border-right: solid 1px #ddd;
          background: #f3f3f3;
          border-top: solid 1px #ddd;
        }
      }
    }
  }
}
